import Taro, { Component, Config } from '@tarojs/taro';
import { View } from '@tarojs/components';
import './mine.scss';
import { AtList, AtListItem } from 'taro-ui';
import record from './record.svg';
import star from './star.svg';

export default class Mine extends Component {

  componentWillMount() {
  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '个人中心'
  };

  handleRecord(type) {
    Taro.navigateTo({
      url: '/pages/record/record?type=' + type
    })
  }

  render() {
    return (
      <View className='mine'>
        <AtList>
          <AtListItem
            onClick={ this.handleRecord.bind(this, 'record') }
            title='历史记录'
            arrow='right'
            thumb={ record }
          />
          <AtListItem
            onClick={ this.handleRecord.bind(this, 'star') }
            title='我的收藏(暂无)'
            arrow='right'
            thumb={ star }
          />
        </AtList>
      </View>
    );
  }
}
